<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>摄影爱好者 - 论坛详情</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #FF3B30;
      --primary-light: #FFE5E5;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --border-light: #E5E6EB;
      --bg-white: #FFFFFF;
      --bg-light: #F2F3F5;
      --gray-100: #F7F8FA;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      padding-bottom: 70px;
      margin: 0;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--bg-white);
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 20px;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    /* 论坛头部信息 */
    .forum-header {
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
      padding: 30px 16px 20px;
      color: white;
      position: relative;
    }
    
    .forum-avatar {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 30px;
      margin-bottom: 10px;
      border: 3px solid white;
    }
    
    .forum-name {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .forum-meta {
      font-size: 13px;
      opacity: 0.9;
      margin-bottom: 15px;
    }
    
    .forum-actions {
      display: flex;
      gap: 10px;
    }
    
    .forum-action-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      border: none;
      text-align: center;
    }
    
    .join-btn {
      background-color: white;
      color: var(--primary);
    }
    
    .share-btn {
      background-color: rgba(255, 255, 255, 0.2);
      color: white;
    }
    
    /* 论坛标签与描述 */
    .forum-info {
      background-color: var(--bg-white);
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .forum-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    
    .forum-tag {
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 4px;
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .forum-desc {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    
    .forum-stats {
      display: flex;
      gap: 20px;
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    /* 帖子筛选工具栏 */
    .posts-toolbar {
      background-color: var(--bg-white);
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .posts-filter {
      display: flex;
      gap: 15px;
      overflow-x: auto;
      padding-bottom: 5px;
      scrollbar-width: none;
    }
    
    .posts-filter::-webkit-scrollbar {
      display: none;
    }
    
    .filter-item {
      font-size: 14px;
      white-space: nowrap;
      color: var(--text-secondary);
      text-decoration: none;
      padding: 3px 0;
      position: relative;
    }
    
    .filter-item.active {
      color: var(--primary);
    }
    
    .filter-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--primary);
      border-radius: 1px;
    }
    
    .posts-view {
      display: flex;
      gap: 5px;
    }
    
    .view-btn {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }
    
    .view-btn.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    /* 帖子列表通用样式 */
    .posts-container {
      margin-top: 10px;
    }
    
    .post-item {
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      text-decoration: none;
      color: var(--text-primary);
    }
    
    .post-header {
      display: flex;
      align-items: center;
      padding: 12px 16px 8px;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .user-info {
      flex: 1;
    }
    
    .user-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 1px;
    }
    
    .post-time {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .post-menu {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 16px;
    }
    
    /* 文字帖子样式 */
    .text-post .post-content {
      padding: 0 16px 12px;
    }
    
    .post-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .post-text {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 12px;
      color: var(--text-primary);
    }
    
    /* 图文帖子样式 */
    .image-post .post-content {
      padding: 0 16px 12px;
    }
    
    .post-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      margin: 8px 0 12px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .post-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    
    /* 投票帖子样式 */
    .poll-post .post-content {
      padding: 0 16px 12px;
    }
    
    .poll-options {
      margin: 10px 0 15px;
    }
    
    .poll-option {
      padding: 12px 15px;
      border: 1px solid var(--border-light);
      border-radius: 8px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .poll-option.selected {
      border-color: var(--primary);
      background-color: var(--primary-light);
    }
    
    .option-text {
      font-size: 14px;
    }
    
    .option-percent {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .poll-info {
      font-size: 12px;
      color: var(--text-secondary);
      text-align: right;
    }
    
    /* 帖子底部交互区 */
    .post-actions {
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      border-top: 1px solid var(--border-light);
      margin: 0 16px;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 13px;
      padding: 5px 10px;
      border-radius: 4px;
    }
    
    .action-btn.active {
      color: var(--primary);
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 发布按钮 */
    .fab-button {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
      border: none;
      z-index: 90;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <button class="header-btn" id="backBtn">
      <i class="fa fa-arrow-left"></i>
    </button>
    <div class="header-title">摄影爱好者</div>
    <button class="header-btn">
      <i class="fa fa-search"></i>
    </button>
  </div>
  
  <!-- 论坛头部信息 -->
  <div class="forum-header">
    <div class="forum-avatar">
      <i class="fa fa-camera"></i>
    </div>
    <div class="forum-name">摄影爱好者</div>
    <div class="forum-meta">24.5k 成员 · 非常活跃</div>
    <div class="forum-actions">
      <button class="forum-action-btn join-btn">
        <i class="fa fa-plus"></i> 加入论坛
      </button>
      <button class="forum-action-btn share-btn">
        <i class="fa fa-share-alt"></i> 分享
      </button>
    </div>
  </div>
  
  <!-- 论坛标签与描述 -->
  <div class="forum-info">
    <div class="forum-tags">
      <span class="forum-tag">摄影</span>
      <span class="forum-tag">器材</span>
      <span class="forum-tag">技巧</span>
      <span class="forum-tag">作品分享</span>
    </div>
    <div class="forum-desc">
      摄影爱好者的交流社区，分享摄影技巧、作品展示、器材体验和后期处理方法。无论你是专业摄影师还是摄影新手，都能在这里找到志同道合的朋友。
    </div>
    <div class="forum-stats">
      <div class="stat-item">
        <i class="fa fa-file-text-o"></i>
        <span>12.8k 帖子</span>
      </div>
      <div class="stat-item">
        <i class="fa fa-user-o"></i>
        <span>328 今日新增</span>
      </div>
      <div class="stat-item">
        <i class="fa fa-clock-o"></i>
        <span>创建于 2020-03</span>
      </div>
    </div>
  </div>
  
  <!-- 帖子筛选工具栏 -->
  <div class="posts-toolbar">
    <div class="posts-filter">
      <a href="#" class="filter-item active">最新发布</a>
      <a href="#" class="filter-item">热门讨论</a>
      <a href="#" class="filter-item">精华帖子</a>
      <a href="#" class="filter-item">活动公告</a>
      <a href="#" class="filter-item">问答求助</a>
    </div>
    <div class="posts-view">
      <button class="view-btn active">
        <i class="fa fa-list"></i>
      </button>
      <button class="view-btn">
        <i class="fa fa-th-large"></i>
      </button>
    </div>
  </div>
  
  <!-- 帖子列表 -->
  <div class="posts-container">
    <!-- 文字帖子 -->
    <a href="#" class="post-item text-post">
      <div class="post-header">
        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
        <div class="user-info">
          <div class="user-name">摄影发烧友</div>
          <div class="post-time">2小时前</div>
        </div>
        <button class="post-menu">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      <div class="post-content">
        <div class="post-title">新手必看：如何正确设置相机参数拍出清晰夜景？</div>
        <div class="post-text">
          很多新手在拍摄夜景时都会遇到画面模糊、噪点过多或者曝光不足的问题。根据我的经验，总结了几个关键参数设置技巧，帮助大家拍出清晰的夜景照片...
        </div>
      </div>
      <div class="post-actions">
        <button class="action-btn">
          <i class="fa fa-thumbs-o-up"></i>
          <span>128</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>42</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
      </div>
    </a>
    
    <!-- 图文帖子 -->
    <a href="#" class="post-item image-post">
      <div class="post-header">
        <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="user-avatar">
        <div class="user-info">
          <div class="user-name">城市摄影师</div>
          <div class="post-time">昨天 15:30</div>
        </div>
        <button class="post-menu">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      <div class="post-content">
        <div class="post-title">周末城市建筑摄影作品集，尝试了不同角度拍摄</div>
        <div class="post-text">
          周末天气不错，带着新入手的广角镜头去拍了组城市建筑，尝试了低角度和仰拍，突出建筑的线条感和宏伟感，后期稍微调整了对比度...
        </div>
        <div class="post-images">
          <img src="https://picsum.photos/300/300?random=10" alt="帖子图片" class="post-image">
          <img src="https://picsum.photos/300/300?random=11" alt="帖子图片" class="post-image">
          <img src="https://picsum.photos/300/300?random=12" alt="帖子图片" class="post-image">
        </div>
      </div>
      <div class="post-actions">
        <button class="action-btn active">
          <i class="fa fa-thumbs-up"></i>
          <span>356</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>89</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
      </div>
    </a>
    
    <!-- 投票帖子 -->
    <a href="#" class="post-item poll-post">
      <div class="post-header">
        <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="user-avatar">
        <div class="user-info">
          <div class="user-name">器材党</div>
          <div class="post-time">3天前</div>
        </div>
        <button class="post-menu">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      <div class="post-content">
        <div class="post-title">大家常用的相机品牌是什么？来投个票吧</div>
        <div class="poll-options">
          <div class="poll-option selected">
            <span class="option-text">佳能</span>
            <span class="option-percent">42%</span>
          </div>
          <div class="poll-option">
            <span class="option-text">尼康</span>
            <span class="option-percent">28%</span>
          </div>
          <div class="poll-option">
            <span class="option-text">索尼</span>
            <span class="option-percent">22%</span>
          </div>
          <div class="poll-option">
            <span class="option-text">富士</span>
            <span class="option-percent">8%</span>
          </div>
        </div>
        <div class="poll-info">已有 1,256 人参与投票 · 还剩 2 天结束</div>
      </div>
      <div class="post-actions">
        <button class="action-btn">
          <i class="fa fa-thumbs-o-up"></i>
          <span>98</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>235</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
      </div>
    </a>
    
    <!-- 公告帖子 -->
    <a href="#" class="post-item text-post" style="background-color: #FFF8E6;">
      <div class="post-header">
        <img src="https://picsum.photos/100/100?random=4" alt="版主头像" class="user-avatar">
        <div class="user-info">
          <div class="user-name" style="display: flex; align-items: center; gap: 5px;">
            论坛管理员
            <span style="background-color: #FF9500; color: white; font-size: 10px; padding: 1px 5px; border-radius: 3px;">版主</span>
          </div>
          <div class="post-time">1周前</div>
        </div>
        <button class="post-menu">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      <div class="post-content">
        <div class="post-title">【公告】摄影大赛开始报名，万元奖品等你拿！</div>
        <div class="post-text">
          本论坛年度摄影大赛正式启动，本次比赛主题为"城市之美"，分为专业组和手机组两个组别，一等奖将获得价值1万元的摄影器材套装。
          报名时间：即日起至6月30日
          作品提交：7月1日-7月15日
          评选时间：7月16日-7月30日
          获奖公布：8月10日
          详情请查看活动页面，欢迎大家踊跃参与！
        </div>
      </div>
      <div class="post-actions">
        <button class="action-btn">
          <i class="fa fa-thumbs-o-up"></i>
          <span>523</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>187</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
      </div>
    </a>
  </div>
  
  <!-- 浮动发布按钮 -->
  <button class="fab-button">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-th-large nav-icon"></i>
      <span>论坛</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-bell-o nav-icon"></i>
      <span>通知</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 返回按钮
    document.getElementById('backBtn').addEventListener('click', function() {
      history.back();
    });
    
    // 加入论坛按钮
    document.querySelector('.join-btn').addEventListener('click', function() {
      if (this.textContent.includes('加入')) {
        this.innerHTML = '<i class="fa fa-check"></i> 已加入';
        this.style.backgroundColor = 'var(--primary)';
        this.style.color = 'white';
      } else {
        this.innerHTML = '<i class="fa fa-plus"></i> 加入论坛';
        this.style.backgroundColor = 'white';
        this.style.color = 'var(--primary)';
      }
    });
    
    // 帖子筛选
    document.querySelectorAll('.filter-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.filter-item').forEach(i => {
          i.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 视图切换
    const viewButtons = document.querySelectorAll('.view-btn');
    viewButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        viewButtons.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        // 这里可以添加切换视图的逻辑
      });
    });
    
    // 帖子操作按钮
    document.querySelectorAll('.action-btn').forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        // 点赞按钮切换状态
        if (this.querySelector('.fa-thumbs-o-up') || this.querySelector('.fa-thumbs-up')) {
          this.classList.toggle('active');
          if (this.classList.contains('active')) {
            this.innerHTML = '<i class="fa fa-thumbs-up"></i><span>' + 
              (parseInt(this.querySelector('span').textContent) + 1) + '</span>';
          } else {
            this.innerHTML = '<i class="fa fa-thumbs-o-up"></i><span>' + 
              (parseInt(this.querySelector('span').textContent) - 1) + '</span>';
          }
        }
      });
    });
    
    // 发布按钮
    document.querySelector('.fab-button').addEventListener('click', function() {
      alert('发布新帖子');
    });
    
    // 底部导航
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.nav-item').forEach(nav => {
          nav.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
  </script>
</body>
</html>
